<template>
	<div style="">
		<div class="order-option-container">
			<div class="order-option-container-inner">
				<div
					v-for="(item, index) in orderOption"
					:key="index"
					class="order-item"
					:style="{
						'border-bottom': `solid 4px ${item.bgColor}`,
					}"
				>
					<div v-if="selectOrderItem.id === item.id" :class="selectOrderItem.id === item.id ? 'selected-style el-icon-check' : ''"></div>
					<div class="width-100-percent item-gap">
						<div class="margin-bottom-4" style="font-size: 14px;">
							<span class="item-gap">{{ item.code }}</span>
							<span :ref="`order`+item.id" class="el-icon-info" @mouseover="onShowOrderPopover(item)" @mouseleave="onShowOrderPopover(null)"></span>
						</div>
						<div class="item-left-txt">客户: {{ item.customerName }}爱速度</div>
						<div class="item-left-txt">品种: {{ item.productName }}</div>
						<div class="item-left-txt">产量: {{ item.completionQty }} / {{ item.orderQty }}</div>
						<div class="item-left-txt">
							<span>截止: {{ item.remainingDays > 0 ? item.remainingDays : item.remainingDays }}天，预计延期{{ item.delayDays }}天</span>
							<span class="el-icon-warning-outline"></span>
						</div>
					</div>
					<div style="cursor: pointer;" @click="onOrderItem(item)">
						<jk-progress type="circle" :color="item.bgColor" :width="80" class="margin-top-10" :percentage="parseInt((item.completionQty / item.orderQty) * 100)"></jk-progress>
					</div>
				</div>
			</div>
		</div>
		<!--订单的提示-->
		<el-popover
			v-if="showOrderPop"
			ref="orderPop"
			:reference="orderReference"
			trigger="hover"
			:append-to-body="false"
			width="320"
		>
			<order-popover-body :active-order-item="activeOrderItem" @on-item="onShowOrderPopover"></order-popover-body>
		</el-popover>
	</div>
</template>

<script>
    import colorMixin from '../colors-mixin';
    import jkProgress from '../../../jk-components/jk-progress';
    import orderPopoverBody from './order-popover-body';

    export default {
        mixins: [colorMixin],
        components: {
            jkProgress,
            orderPopoverBody
        },
        props: {
            selectOrderItem: {
                type: Object,
                default() {
                    return {};
                }
            },
            orderOption: {
                type: Array,
                default() {
                    return [];
                }
            },
            isFullScreen: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                showOrderPop: false,
                orderReference: {},
                // 保存当前激活的reference
                activeOrderItem: {},
                reference: {},
                // 控制渲染条件 如果不用v-if会报错 具体可自行尝试
                showPop: false,
                layout: []
            };
        },
        methods: {
            onOrderItem(item) {
                this.$emit('on-item', JSON.parse(JSON.stringify(item)));
            },
            onShowOrderPopover(item) {
                if (!item) return;
                // 这个操作是为了避免与源码中的点击reference doToggle方法冲突
                if (this.activeOrderItem.id === item.id && this.showOrderPop) return;
                this.showOrderPop = false;
                this.activeOrderItem = item;
                // 因为reference是需要获取dom的引用 所以需要传DOM
                this.orderReference = this.$refs['order' + item.id][0];
                this.$nextTick(() => {
                    // 等待显示的popover销毁后再 重新渲染新的popover
                    this.showOrderPop = true;
                    this.$nextTick(() => {
                        // 此时才能获取refs引用
                        this.$refs.orderPop.doShow();
                    });
                });
            }
        }
    };
</script>
<style scoped lang="scss">
    .order-option-container {
    width: 100%;
    height: 138px;
    background: #1E1A46;
    border-radius: 6px;
    padding: 12px;
    margin-top: 14px;
    font-size: 13px;
    .order-option-container-inner {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        .order-item {
            width: 320px;
            height: 100%;
            background: #38335B;
            flex-shrink: 0;
            border: solid 1px #38335B;
            border-radius: 6px;
            padding: 10px 10px;
            display: flex;
            color: #fff;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            position: relative;
            .item-left-txt {
                width: 210px;
                color: #808695;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .selected-style {
                width: 20px;
                height: 20px;
                background: #19be6b;
                color: #fff;
                position: absolute;
                right: 0;
                top:0;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px;
            }
            .order-item-circle {
                width: 8px;
                height: 8px;
                flex-shrink: 0;
                border-radius: 50%;
                margin-right: 10px;
            }
            ::v-deep .el-progress--circle .el-progress__text, .el-progress--dashboard .el-progress__text {
                position: absolute;
                top: 50%;
                left: 0;
                width: 100%;
                color: #fff!important;
                text-align: center;
                margin: 0;
                -webkit-transform: translate(0, -50%);
                transform: translate(0, -50%);
            }
        }
    }
    // 滚动条样式
    .order-option-container-inner::-webkit-scrollbar{
        width: 6px;
        height: 7px;
    }
    .order-option-container-inner::-webkit-scrollbar-thumb:hover{
        width: 6px;
        height: 7px;
        cursor: pointer;
        background-color: #114896;
    }
    .order-option-container-inner::-webkit-scrollbar-thumb{
        border-radius: 1em;
        background-color: #1A2F68;
    }
    .order-option-container-inner::-webkit-scrollbar-track{
        border-radius: 1em;
        background-color: rgba(50,50,50,.1);
    }
    .order-option-container-inner:hover {
        transition: all .5s;
    }
}
</style>
